<template lang="html">

  <div class="car">
    <selfHeader></selfHeader>

    <header class="header-one" style="margin-top: 11vw">
      <div class="header-icon">
        <img v-if='from && from.avatar' :src='"http://114.55.102.36:8809" + from.avatar' @click='upload(1)'>
        <span v-else class="icon2-user" @click='upload(1)'></span>
      </div>
      <input style='display: none' ref="filElem" type="file" class="upload-file" @change="previewFile">
    </header>

    <mt-field label="昵称" placeholder="请输入昵称" v-model="from.nickname"></mt-field>
    <mt-field label="真实姓名" placeholder="请输入真实姓名" v-model="from.realName"></mt-field>
    <mt-field label="密码" placeholder="请输入密码" v-model="from.showPwd"></mt-field>

    <div class="sex">
      <span>
        性别
      </span>

      <select class="selectItem" v-model="from.sex">
        <option :value="1">男</option>
        <option :value="2">女</option>
      </select>
    </div>

    <mt-field label="支付密码" placeholder="请输入支付密码" v-model="from.payCode"></mt-field>
    <mt-field label="支付宝账号" placeholder="请输入支付宝账号" v-model="from.aliplayName"></mt-field>
    <img :src='"http://114.55.102.36:8809" + from.playImg' alt="" width="100" height="100" class="playImg"
         @click='upload(2)'>
    <button class="btn" @click='change'>保存修改</button>
  </div>
</template>

<script>
import {appUserInfo, appUserEdit} from '@/http/api'
import Baseline from '@/common/_baseline.vue'
import {Toast, Field} from 'mint-ui'
import selfHeader from '@/common/header'

export default {
  components: {
    'v-baseline': Baseline,
    Field,
    selfHeader
  },
  data() {
    return {
      from: {},
      url: '',
      imgType: 0
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    async getUser() {
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      const data = {
        uid: user.user.uid
      }
      const res = await appUserInfo(data)
      if (res.code * 1 === 200) {
        this.from = res.data
      }
    },
    async change() {
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      const data = {
        ...this.from,
        uid: user.user.uid,
        pwd: this.from.showPwd === '' ? null : this.from.showPwd
      }
      const res = await appUserEdit(data)
      if (res.code * 1 === 200) {
        Toast('修改个人资料成功')
        this.$router.push('/')
      }
    },
    upload(val) {
      this.$refs.filElem.click()
      this.imgType = val * 1
    },
    previewFile() {
      const file = this.$refs.filElem.files[0];
      // var reader = new FileReader();
      const formData = new FormData()
      formData.append('file', file)
      const xhr = new XMLHttpRequest()
      let that = this
      xhr.onreadystatechange = function () {
        const result = JSON.parse(xhr.responseText)
        let dataUrl = result.data.path
        if (dataUrl) {
          if (that.imgType * 1 === 1) {
            that.from.avatar = dataUrl
          }
          if (that.imgType * 1 === 2) {
            that.from.playImg = dataUrl
          }

          this.imgType = 0
        }
      }
      xhr.open('POST', 'http://114.55.102.36:8809/api/shared/upload/image', true)
      xhr.send(formData)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/fz.less';
@import '../assets/index/style.css';
@import '../assets/user/icon/carstyle.css';

.car {
  width: 100%;
  margin-top: 50px;
  background-color: #F8FCFF;

  .header-one {
    width: 100%;
    height: 16vw;
    background: url(../../static/carbg.png) center 0 #048AB9;
    background-size: auto 100%;
    padding: 3.2vw 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    .header-icon {
      border: .4vw solid #ffffff;
      background-color: @cl;
      margin-left: 4vw;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 14vw;
      height: 14vw;
      line-height: 16vw;
      text-align: center;
      border-radius: 50%;
      overflow: hidden;
      position: relative;

      span {
        .fz(font-size, 54);

        &::before {
          color: #ffffff;
        }
      }

      img {
        width: 14vw;
        height: 14vw;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    > span {
      margin-left: 3.2vw;
      .fz(font-size, 30);
      color: #ffffff;
      letter-spacing: .2vw;
    }
  }

  .main {
    width: 100%;

    .my-indent {
      width: 100%;
      display: block;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #333;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding: 0 5vw;
      height: 15vw;
      line-height: 15vw;
      background-color: #fff;
      .bd();

      &:active {
        background-color: rgb(224, 227, 230)
      }

      .my-indent-right {
        span {
          display: inline-block;
          .fz(font-size, 28);
          color: rgba(0, 0, 0, .4);
          position: relative;
        }

        i {
          position: relative;
          top: .8vw;
        }
      }
    }

    .my-pay {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      padding: 2vw 0;
      background-color: #fff;
      .bd();

      > a {
        display: block;
        width: 33.33%;
        color: #999;
        text-align: center;

        > span {
          .fz(font-size, 50);
          margin-top: 2.3vw;
          display: block;
          text-align: center;
        }

        p {
          padding: 2.3vw 0;
          text-align: center;
        }
      }
    }

    .my-vip, .my-service, .my-settle {
      width: 100%;
      .mt();
      .bd();
      .bt();

      > a {
        background-color: #fff;
        display: block;
        width: 100%;
        display: -ms-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 15vw;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 6vw;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        &:active {
          background-color: rgb(224, 227, 230);
        }

        > div {
          -ms-flex: 2;
          -webkit-box-flex: 2;
          flex: 2;
          padding-top: 1.3vw;
        }

        .my-vip-top-div {
          padding-top: 0;
        }

        > p {
          -ms-flex: 10;
          -webkit-box-flex: 10;
          flex: 10;
          position: relative;

          &:active {
            background-color: rgb(224, 227, 230);
          }

          i {
            position: absolute;
            right: 0;
            top: .4vw;
          }
        }
      }

    }
  }
}

/*图标大小不一，重新定义*/

.icon-go {
  .fz(font-size, 36);

  &::before {
    color: #aba8a8;
  }
}

[class^="icon2-"],
[class*=" icon2-"] {
  .fz(font-size, 50);
}

.icon2-service {
  .fz(font-size, 34);
}

.playImg {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  margin: 20px auto 0;
}

.sex {
  background-image: -webkit-linear-gradient(top, #d9d9d9, #d9d9d9 50%, transparent 50%);
  background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
  background-size: 120% 1px;
  background-repeat: no-repeat;
  background-position: top left;
  background-origin: content-box;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  line-height: 1;
  min-height: inherit;
  overflow: hidden;
  padding: 0 10px;
  width: 100%;
  height: 48px;
  line-height: 48px;
  span {
    width: 105px;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }
}
</style>
